<template>
  <div class="uploading">
    <!-- action： 上传图片的地址（会自动上传到这个地址）
      list-type="picture-card" 就是设置为照片墙效果
      :on-preview： 当点击预览图标触发的钩子
      :on-remove：  当点击删除图标触发的钩子
      file-list： 保存上传的图片的数组 -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :file-list="fileList"
      :class="{ disabled: isDisabled }"
      :http-request="upload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog title="图片预览" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-progress
      v-if="isprogress"
      style="width: 196px"
      :percentage="percentage"
    ></el-progress>
  </div>
</template>

<script>
// 导入
import COS from "cos-js-sdk-v5";
// 实例化一个操作腾讯云的对象
let cos = new COS({
  // 密钥id
  SecretId: "AKIDymKbbKn0wb08yXpqa2FBqDNHuHNDm57t",
  // 密钥key
  SecretKey: "WljQqzrRkmY3HFwMVNzKOBhwub1B5i5B",
});
export default {
  name: "isimg",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      isprogress: false,
      percentage: 0,
    };
  },
  methods: {
    upload(params) {
      // 把我们上传的代码写到这即可
      // 参数里有一个属性叫file，就是我们选择的图片对象
      // file对象里有个name属性，就是图片名字
      this.isprogress = true;
      cos.putObject(
        {
          // 存储桶名字
          Bucket: "code-1306809220" /* 必须 */,
          Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
          // key就是你上传后的文件名
          Key: params.file.name /* 必须 */,
          StorageClass: "STANDARD",
          Body: params.file, // 上传文件对象

          // 是一个回调：上传进度的回调函数
          onProgress: (progressData) => {
            this.percentage = progressData.percent * 100;
          },
        },
        // 上传成功或失败会调用的回调函数
        // 如果err有值代表失败了，如果没有值代表成功了
        (err, data) => {
          if (!err) {
            // 上传成功后的图片地址在data.Location
            // console.log(data.Location);
            this.fileList = [{ url: "http://" + data.Location }];
          }
          this.percentage = 0;
          this.isprogress = false;
        }
      );
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  computed: {
    isDisabled() {
      return this.fileList.length > 0;
    },
  },
};
</script>

<style scoped lang='scss'>
.disabled {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>